<%--
  Created by IntelliJ IDEA.
  User: SXYQ
  Date: 2020/12/16
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.servletContext.contextPath}/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/playback.css"/>

    <style>

    </style>
</head>
<body>
<div  id="kaishi">
    <span style="color: #fff;font-size: 24px"></span>
</div>
<div style="padding: 10px; background-color: #F2F2F2;" id="fdiv">

    <div class="layui-row layui-col-space15">

        <div class="layui-col-md4">
            <div class="layui-card ">
                <div class="layui-card-body my-card-body">
                    <div class="layui-col-md12">
                        <div class="layui-card ">
                            <div class="layui-card-body" style="height: 19%;">
                                <span style="font-size: 20px;font-weight: 700;color: #333;">暂无作业</span>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card ">
                            <div class="layui-card-body " style="height: 19%;">
                                <div class="layui-col-md9">
                                    <div class="layui-card-body " style="height: 19%;">
                                        <span><b>双头搅拌桩记录仪16号(已撤场)</b></span>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-card-body "
                                         style="height: 19%; text-align: center;line-height:19%;padding-left: 0px;padding-right: 0px">
                                        <span style="font-size: 10px;color: #999;">喷浆中</span> <img id="deng1"
                                                                                                   src="/img/zhishidengh.png">
                                    </div>
                                </div>
                                <div class="layui-col-md9">
                                    <div class="layui-card-body " style="height: 19%;">
                                        <span style="font-size: 10px;color: #999;">  暂无产品名称</span>
                                    </div>
                                </div>
                                <div class="layui-col-md3">
                                    <div class="layui-card-body "
                                         style="height: 19%; text-align: center;line-height:19%;padding-left: 0px;padding-right: 0px">
                                        <span style="font-size: 10px;color: #999;">记录中</span> <img id="deng2"
                                                                                                   src="/img/zhishidengh.png">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card ">
                            <div class="layui-card-body " style="height: 19%;">
                                <div style="height: 50%"><img
                                        src="/img/lianxiren.png">&nbsp;&nbsp;&nbsp;<span
                                        style="font-size: 10px;color: #999;">未绑定</span></div>
                                <div style="height: 50%"><img
                                        src="/img/dianhua.png">&nbsp;&nbsp;&nbsp;<span
                                        style="font-size: 10px;color: #999;">暂无联系方式</span></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card ">
                            <div class="layui-card-body "
                                 style="height: 19%;background-color: #F8FEFE; text-align: center;line-height:70px">
                                <span>历史回放中</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body my-card-body ">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-body" style="height: 17px;padding-top: 0px;padding-bottom: 3px">
                                <b>段灰量(kg)、电流(A)变化曲线</b>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body  asd">
                                <div id="runInHole" style="width:180px;height:155px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body  asd">
                                <div id="runOnHole" style="width:180px;height:155px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body asd">
                                333
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body  asd">
                                444
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body my-card-body">
                    <div id="container"></div>
                    <div id="up-map-div">
                        <div class="layui-inline" id="img">
                            <img id="img1" src="/img/luxiang%20.png">
                        </div>
                        <span class="layui-inline" style="color: red;font-size: 20px">REPLAY</span>
                    </div>
                    <div id="up-map-div2">
                        <span style="color: red;font-size: 12px">  2012-02-03 12:23:02</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="layui-card">
                <div class="layui-card-body my-card-body">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body " style="height: 45%">
                                <div id="depth" style="width:140px;height:155px;"></div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body " style="height: 45%">
                                <div id="speed" style="width:170px;height:155px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body " style="height: 45%">
                                <div id="flow" style="width:170px;height:155px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body " style="height: 45%">
                                <div id="electricity" style="width:170px;height:155px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-card">
                <div class="layui-card-body my-card-body">
                </div>
            </div>
        </div>
    </div>
    <div id="cdiv">
        <svg id="chongbo" class="icon" aria-hidden="true" style="color:white;font-size: 32px">
            <use xlink:href="#icon-zhongbo"></use>
        </svg>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <i id="bofang" class="layui-icon layui-icon-pause" style="font-size: 30px; color: white"></i>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <svg id="tingzhi" class="icon" aria-hidden="true" style="color:white;font-size: 30px">
            <use xlink:href="#icon-tingzhi"></use>
        </svg>
        <div id="zhengchang" class="layui-input-inline" style=" float: right;right: 520px;font-size: 20px">
            <input id="h1" value="4000" type="hidden">
            <span><a href="javascript:void(0);" style="color: white">正常</a></span>
        </div>
        <div id="beisu">
            <ul>
                <li id="a1" value="3000"><a href="javascript:void(0);" style="font-size: 16px;color:#58FA58">正常</a></li>
                <li id="a2" value="1000"><a href="javascript:void(0);" style="font-size: 16px;color:white">快速</a></li>
                <li id="a3" value="100"><a href="javascript:void(0);" style="font-size: 16px;color:white">急速</a></li>
            </ul>
        </div>
    </div>
</div>


<script src="${pageContext.servletContext.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/plugins/layui/layui.js" type="text/javascript"
        charset="utf-8"></script>
<script src="${pageContext.servletContext.contextPath}/js/echarts.min.js" type="text/javascript"
        charset="utf-8"></script>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/js/playback.js"></script>
<!-- 这里要配置参数key,将其值设置为高德官网开发者获取的key -->
<script src="http://webapi.amap.com/maps?v=1.3&key=d0533d004d93f60c12ceff402c577627"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/jquery-migrate-1.0.0.js"></script>
<script type="text/javascript" src="${pageContext.servletContext.contextPath}/js/iconfont.js"></script>
<%--<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>--%>
</body>
<script>
    //高德地图
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 4,
        center: [114.384129, 30.508543],
        mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
        viewMode: '3D', //开启3D视图,默认为关闭
        buildingAnimation: true //楼块出现是否带动画
        //前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
    });
    // 基于准备好的dom，初始化echarts实例
    var runInHole = echarts.init(document.getElementById('runInHole'));
    var runOnHole = echarts.init(document.getElementById('runOnHole'));
    var depth = echarts.init(document.getElementById('depth'));
    var speed = echarts.init(document.getElementById('speed'));
    var flow = echarts.init(document.getElementById('flow'));
    var electricity = echarts.init(document.getElementById('electricity'));
    // 指定图表的配置项和数据 下钻图表
    var runInHoleOption = {
        title: {
            text: '下钻',
            left: 'left',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 10,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },
        },
        grid: {//设置表格的外边距
            left: '3%',
            right: '3%',
            top: '11%',
            bottom: '3%',
            containLabel: true
        },

        tooltip: {
            trigger: 'axis',
            axisPointer:
                {axis: 'y'}//设置提示框根据横轴选择数据
        },
        formatter: function (params, ticket, callback) {//自定义显示提示框内容
            var htmlStr = '';
            for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var xName = param.name;//x轴的名称
                var seriesName = param.seriesName;//图例名称
                var value = param.value;//y轴值
                var color = param.color;//图例颜色
                if (i === 0) {
                    htmlStr += xName + '<br/>';//x轴的名称
                    htmlStr += '<div>';
                    htmlStr += '深度(米):' + value[1] + '</br>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '(kg)：' + value[0];
                    htmlStr += '</div>';
                } else {
                    /*   htmlStr += xName + '<br/>';//x轴的名称 */
                    htmlStr += '<div>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '(A)：' + value[0];
                    htmlStr += '</div>';
                }
            }
            return htmlStr;
        },
        dataZoom: [
            /*{
                show: true,
                realtime: true,
                start: 0,
                end: 30
            },*/
            {
                type: 'inside',
                realtime: true,
                start: 0,
                end: 60
            }
        ],
        xAxis: {
            type: 'value',
            interval: 10, // 步长
            position: 'top',//设置x轴刻度在上方显示
            min: 0, // 起始
            max: 60, // 终止
            splitLine: {
                show: false//设置只显示横向网格
            }
        },
        yAxis: {
            type: 'value',
            inverse: true,//y轴反转
            interval: 5, // 步长
            min: 0, // 起始
            max: 30 // 终止

        },
        series: [{
            name: '浆量',
            data: [/*[6.17,1.01],[5.57,1.11],[5.46,1.23],[3.58,1.34],[1.72,3.62],[7.97,4.30]*/],
            type: 'line',
            // symbol: 'none',  //取消折点圆圈
            itemStyle: {
                color: '#F86969'//设置折线颜色
            }
        }, {
            name: '电流',
            data: [/*[0.89,1.01],[0.91,1.11],[0.90,1.23],[0.92,1.34],[0.89,3.62],[0.90,4.30]*/],
            type: 'line',
            // symbol: 'none',  //取消折点圆圈
            itemStyle: {
                color: '#60D0FF'//设置折线颜色
            }
        }]
    };
    var runOnHoleOption = {
        title: {
            text: '提钻',
            left: 'left',
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontFamily: 'Arial, Verdana, sans...',
                fontSize: 10,
                fontStyle: 'normal',
                fontWeight: 'normal'
            },
        },
        grid: {//设置表格的外边距
            left: '3%',
            right: '3%',
            top: '11%',
            bottom: '3%',
            containLabel: true
        },

        tooltip: {
            trigger: 'axis',
            axisPointer:
                {axis: 'y'}//设置提示框根据横轴选择数据
        },
        formatter: function (params, ticket, callback) {//自定义显示提示框内容
            var htmlStr = '';
            for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var xName = param.name;//x轴的名称
                var seriesName = param.seriesName;//图例名称
                var value = param.value;//y轴值
                var color = param.color;//图例颜色
                if (i === 0) {
                    htmlStr += xName + '<br/>';//x轴的名称
                    htmlStr += '<div>';
                    htmlStr += '深度(米):' + value[1] + '</br>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '(kg)：' + value[0];
                    htmlStr += '</div>';
                } else {
                    /*   htmlStr += xName + '<br/>';//x轴的名称 */
                    htmlStr += '<div>';
                    //为了保证和原来的效果一样，这里自己实现了一个点的效果
                    htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + color + '"></span>';
                    //圆点后面显示的文本
                    htmlStr += seriesName + '(A)：' + value[0];
                    htmlStr += '</div>';
                }
            }
            return htmlStr;
        },
        dataZoom: [
            {
                type: 'inside',
                realtime: true,
                start: 0,
                end: 60
            }
        ],
        xAxis: {
            type: 'value',
            interval: 10, // 步长
            position: 'top',//设置x轴刻度在上方显示
            min: 0, // 起始
            max: 60, // 终止
            splitLine: {
                show: false//设置只显示横向网格
            }
        },
        yAxis: {
            type: 'value',
            inverse: true,//y轴反转
            interval: 5, // 步长
            min: 0, // 起始
            max: 30 // 终止

        },
        series: [{
            name: '浆量',
            data: [/*[6.17,1.01],[5.57,1.11],[5.46,1.23],[3.58,1.34],[1.72,3.62],[7.97,4.30]*/],
            type: 'line',
            // symbol: 'none',  //取消折点圆圈
            itemStyle: {
                color: '#F86969'//设置折线颜色
            }
        }, {
            name: '电流',
            data: [/*[0.89,1.01],[0.91,1.11],[0.90,1.23],[0.92,1.34],[0.89,3.62],[0.90,4.30]*/],
            type: 'line',
            // symbol: 'none',  //取消折点圆圈
            itemStyle: {
                color: '#60D0FF'//设置折线颜色
            }
        }]
    };
    //深度图表
    var depthOption = {
        title: [{
            text: '深度(m)',
            x: 'center',//居中
            y: '131',//底部
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'normal'
            }
        }, {
            text: '',
            subtext: '0米',//副标题
            left: 23,
            top: 1
        }],
        grid: {//设置表格的外边距
            left: '3%',
            right: '3%',
            top: '5%',
            bottom: '13%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            splitLine: {
                show: false//设置只显示横向网格
            },
            axisLine: {
                show: false//取消显示坐标轴
            }
        },
        yAxis: {
            type: 'value',
            inverse: true,//y轴反转
            min: 0,
            max: 30,
            splitLine: {
                show: false//设置只显示横向网格
            },
            axisLabel: {
                show: false//隐藏坐标轴
            }

        },
        series: [{
            data: [0],
            type: 'bar',
            showBackground: true,
            barWidth: 30,//柱图宽度,
            color: '#60D0FF',
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
                normal: {
                    label: {
                        show: true,  //开启显示
                        position: 'right',  //在右方显示
                        textStyle: {  //数值样式
                            color: '#60D0FF',
                            fontSize: 16
                        }
                    }
                }
            }
        }]
    };
    //速度图表
    var speedOption = {
        title: {
            text: '速度(cm/min)',
            x: 'center',//居中
            y: '131',//底部
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'normal'
            }
        },

        series: [{
            radius: '100%',//设置表盘大小
            name: 'Pressure',
            type: 'gauge',
            min: 0,
            max: 250,
            splitNumber: 4,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#60D0FF']],
                    width: 3
                }
            },
            itemStyle: {
                color: '#60D0FF'
                // width:35
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                distance: -15,
                fontSize: 10
            },

            detail: {
                valueAnimation: true,
                textStyle: {
                    fontSize: 16
                },
                offsetCenter: [0, '60%'],
                formatter: '{value}'
            },
            data: []
        }]
    };
    //流量图表
    var flowOption = {
        title: {
            text: '流量(L/min)',
            x: 'center',//居中
            y: '131',//底部
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'normal'
            }
        },

        series: [{
            radius: '100%',//设置表盘大小
            name: 'Pressure',
            type: 'gauge',
            min: 0,
            max: 100,
            splitNumber: 5,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#60D0FF']],
                    width: 3
                }
            },
            itemStyle: {
                color: '#60D0FF'
                // width:35
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                distance: -15,
                fontSize: 10
            },

            detail: {
                valueAnimation: true,
                textStyle: {
                    fontSize: 16
                },
                offsetCenter: [0, '60%'],
                formatter: '{value}'
            },
            data: []
        }]
    };
    //电流图表
    var electricityOption = {
        title: {
            text: '电流(A)',
            x: 'center',//居中
            y: '131',//底部
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 14,
                fontStyle: 'normal',
                fontWeight: 'normal'
            }
        },
        series: [{
            radius: '100%',//设置表盘大小
            name: 'Pressure',
            type: 'gauge',
            min: 0,
            max: 250,
            splitNumber: 4,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#60D0FF']],
                    width: 3
                }
            },
            itemStyle: {
                color: '#60D0FF'
                // width:35
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                distance: -15,
                fontSize: 10
            },

            detail: {
                valueAnimation: true,
                textStyle: {
                    fontSize: 16
                },
                offsetCenter: [0, '60%'],
                formatter: '{value}'
            },
            data: [35]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    runInHole.setOption(runInHoleOption);
    runOnHole.setOption(runOnHoleOption);
    depth.setOption(depthOption);
    speed.setOption(speedOption);
    flow.setOption(flowOption);
    electricity.setOption(electricityOption);

    function child(obj) {
        var stakeMark = obj;
        layui.use(['layer', 'element'], function () {
            layer = layui.layer;
            element = layui.element;
            // var data = [];

            $.post("${pageContext.servletContext.contextPath}/data/getData.do", {}, function (obj) {
                //设置地图参数
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(114.384129, 30.508543),
                    offset: new AMap.Pixel(-10, -10),
                    icon: '${pageContext.servletContext.contextPath}/img/dd.png', // 添加 Icon 图标 URL
                    title: '测试'

                });
                marker.setLabel({
                    offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                    content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
                    offset: new AMap.Pixel(-60, -30)//设置lable偏移量
                    // direction: 'top' //设置文本标注方位
                });
                map.add(marker);
                map.setCenter([114.384129, 30.508543]);//设置地图初始中心位置
                map.setZoom(10);//设置地图缩放级别
                var aolarr = [];
                var aolDownArr = [];
                var elearr = [];
                var eleDownArr = [];
                var up = obj.up;
                var down = obj.down;
                var i = 0;
                var j = 0;
                var r1;
                var r2;
                var msg;

                function startCount() {
                    if (i < up.length) {
                        var arr = [];
                        var arr2 = [];
                        var deptharr = [];
                        var speedarr = [];
                        var fluxarr = [];
                        var currentarr = [];
                        arr.push(up[i].au_aol);
                        arr2.push(up[i].electricity);
                        arr.push(up[i].drilling_depth);
                        arr2.push(up[i].drilling_depth);
                        deptharr.push(up[i].drilling_depth);
                        speedarr.push(up[i].drilling_speed);
                        fluxarr.push(up[i].cement_flux);
                        currentarr.push(up[i].electricity);
                        aolarr.push(arr);
                        elearr.push(arr2);
                        runInHoleOption.series[0].data = aolarr;
                        runInHoleOption.series[1].data = elearr;
                        depthOption.series[0].data = deptharr;
                        speedOption.series[0].data = speedarr;
                        flowOption.series[0].data = fluxarr;
                        electricityOption.series[0].data = currentarr;
                        runInHole.setOption(runInHoleOption);
                        depth.setOption(depthOption);
                        speed.setOption(speedOption);
                        flow.setOption(flowOption);
                        electricity.setOption(electricityOption);
                        i++;
                        var ff = f1();
                        r1 = setTimeout(startCount, f1());
                    } else {
                        if (j < down.length) {
                            var arr = [];
                            var arr2 = [];
                            var deptharr = [];
                            var speedarr = [];
                            var fluxarr = [];
                            var currentarr = [];
                            arr.push(down[j].au_aol);
                            arr2.push(down[j].electricity);
                            arr.push(down[j].drilling_depth);
                            arr2.push(down[j].drilling_depth);
                            deptharr.push(down[j].drilling_depth);
                            speedarr.push(down[j].drilling_speed);
                            fluxarr.push(down[j].cement_flux);
                            currentarr.push(down[j].electricity);
                            aolDownArr.push(arr);
                            eleDownArr.push(arr2);
                            console.log(aolDownArr);
                            console.log(eleDownArr);
                            runOnHoleOption.series[0].data = aolDownArr;
                            runOnHoleOption.series[1].data = eleDownArr;
                            depthOption.series[0].data = deptharr;
                            speedOption.series[0].data = speedarr;
                            flowOption.series[0].data = fluxarr;
                            electricityOption.series[0].data = currentarr;
                            runOnHole.setOption(runOnHoleOption);
                            depth.setOption(depthOption);
                            speed.setOption(speedOption);
                            flow.setOption(flowOption);
                            electricity.setOption(electricityOption);
                            j++;
                            r2 = setTimeout(startCount, f1());
                        } else {
                           /* msg = layer.msg('<span style="font-size:24px">播放结束</span>', {
                                time: '-1',
                                area: '300px'
                            });*/
                            $("#kaishi").find("span").text("播放结束");
                            $("#kaishi").css({"display":"block"});
                        }
                    }
                    //setTimeout是超时调用，使用递归模拟间歇调用
                }

                setTimeout(startCount, 1000);//启动定时器

                var interval = null;//计时器
                var pause;//layui消息框
                var tag = true;
                $("#bofang").click(function () {
                        if (tag) {
                            $(this).removeClass("layui-icon layui-icon-pause").addClass("layui-icon layui-icon-play");
                            clearTimeout(interval);
                            clearTimeout(r1);
                            clearTimeout(r2);
                            interval = null;
                         /*   pause = layer.msg('<span style="font-size:24px">暂停</span>', {
                                time: '-1',
                                area: '200px'
                            });*/
                            $("#kaishi").find("span").text("暂停");
                            $("#kaishi").css({"display":"block"});
                            tag = false;
                        } else {
                            $(this).removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                            if (interval != null) {//判断计时器是否为空
                                clearTimeout(interval);
                                interval = null;
                            }
                            // layer.close(pause);
                            $("#kaishi").css({"display":"none"});
                            interval = setTimeout(startCount, 10);//启动计时器，调用overs函数，
                            tag = true;
                        }
                    }
                )
                //绑定重播单击事件
                $("#chongbo").click(function () {
                    runInHoleOption.series[0].data = [];
                    runInHoleOption.series[1].data = [];
                    runOnHoleOption.series[0].data = [];
                    runOnHoleOption.series[1].data = [];
                    depthOption.series[0].data = [];
                    speedOption.series[0].data = [];
                    flowOption.series[0].data = [];
                    electricityOption.series[0].data = [];
                    runInHole.setOption(runInHoleOption);
                    runOnHole.setOption(runOnHoleOption);
                    depth.setOption(depthOption);
                    speed.setOption(speedOption);
                    flow.setOption(flowOption);
                    electricity.setOption(electricityOption);
                    aolarr = [];
                    aolDownArr = [];
                    elearr = [];
                    eleDownArr = [];
                    i = 0;
                    j = 0;
                    clearTimeout(interval);
                    clearTimeout(r1);
                    clearTimeout(r2);
                    setTimeout(startCount, f1());
                    // layer.close(msg);
                    $("#bofang").removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                    $("#kaishi").css({"display":"none"});
                    tag = true;
                    // layer.close(pause);
                });

                //setimeout计时
                function f1() {
                    var s = $("#h1").val();
                    return s;
                }
            });
            //关闭窗口
            $("#tingzhi").click(function () {
                var wname = window.name;
                var index = parent.layer.getFrameIndex(wname);
                parent.layer.close(index);
            })
        });
    }

    playback();

    function playback() {
        var obj = window.parent.toPlaybackValue();
        layui.use(['layer', 'element'], function () {
            layer = layui.layer;
            element = layui.element;
            // var data = [];

            $.post("${pageContext.servletContext.contextPath}/data/getData.do", {}, function (obj) {
                //设置地图参数
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(114.384129, 30.508543),
                    offset: new AMap.Pixel(-10, -10),
                    icon: '${pageContext.servletContext.contextPath}/img/dd.png', // 添加 Icon 图标 URL
                    title: '测试'

                });
                marker.setLabel({
                    offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                    content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
                    offset: new AMap.Pixel(-60, -30)//设置lable偏移量
                    // direction: 'top' //设置文本标注方位
                });
                map.add(marker);
                map.setCenter([114.384129, 30.508543]);//设置地图初始中心位置
                map.setZoom(10);//设置地图缩放级别
                var aolarr = [];
                var aolDownArr = [];
                var elearr = [];
                var eleDownArr = [];
                var up = obj.up;
                var down = obj.down;
                var i = 0;
                var j = 0;
                var r1;
                var r2;
                var msg;

                function startCount() {
                    if (i < up.length) {
                        var arr = [];
                        var arr2 = [];
                        var deptharr = [];
                        var speedarr = [];
                        var fluxarr = [];
                        var currentarr = [];
                        arr.push(up[i].au_aol);
                        arr2.push(up[i].electricity);
                        arr.push(up[i].drilling_depth);
                        arr2.push(up[i].drilling_depth);
                        deptharr.push(up[i].drilling_depth);
                        speedarr.push(up[i].drilling_speed);
                        fluxarr.push(up[i].cement_flux);
                        currentarr.push(up[i].electricity);
                        aolarr.push(arr);
                        elearr.push(arr2);
                        runInHoleOption.series[0].data = aolarr;
                        runInHoleOption.series[1].data = elearr;
                        depthOption.series[0].data = deptharr;
                        speedOption.series[0].data = speedarr;
                        flowOption.series[0].data = fluxarr;
                        electricityOption.series[0].data = currentarr;
                        runInHole.setOption(runInHoleOption);
                        depth.setOption(depthOption);
                        speed.setOption(speedOption);
                        flow.setOption(flowOption);
                        electricity.setOption(electricityOption);
                        i++;
                        var ff = f1();
                        r1 = setTimeout(startCount, f1());
                    } else {
                        if (j < down.length) {
                            var arr = [];
                            var arr2 = [];
                            var deptharr = [];
                            var speedarr = [];
                            var fluxarr = [];
                            var currentarr = [];
                            arr.push(down[j].au_aol);
                            arr2.push(down[j].electricity);
                            arr.push(down[j].drilling_depth);
                            arr2.push(down[j].drilling_depth);
                            deptharr.push(down[j].drilling_depth);
                            speedarr.push(down[j].drilling_speed);
                            fluxarr.push(down[j].cement_flux);
                            currentarr.push(down[j].electricity);
                            aolDownArr.push(arr);
                            eleDownArr.push(arr2);
                            console.log(aolDownArr);
                            console.log(eleDownArr);
                            runOnHoleOption.series[0].data = aolDownArr;
                            runOnHoleOption.series[1].data = eleDownArr;
                            depthOption.series[0].data = deptharr;
                            speedOption.series[0].data = speedarr;
                            flowOption.series[0].data = fluxarr;
                            electricityOption.series[0].data = currentarr;
                            runOnHole.setOption(runOnHoleOption);
                            depth.setOption(depthOption);
                            speed.setOption(speedOption);
                            flow.setOption(flowOption);
                            electricity.setOption(electricityOption);
                            j++;
                            r2 = setTimeout(startCount, f1());
                        } else {
                            /* msg = layer.msg('<span style="font-size:24px">播放结束</span>', {
                                 time: '-1',
                                 area: '300px'
                             });*/
                            $("#kaishi").find("span").text("播放结束");
                            $("#kaishi").css({"display":"block"});
                        }
                    }
                    //setTimeout是超时调用，使用递归模拟间歇调用
                }

                setTimeout(startCount, 1000);//启动定时器

                var interval = null;//计时器
                var pause;//layui消息框
                var tag = true;
                $("#bofang").click(function () {
                        if (tag) {
                            $(this).removeClass("layui-icon layui-icon-pause").addClass("layui-icon layui-icon-play");
                            clearTimeout(interval);
                            clearTimeout(r1);
                            clearTimeout(r2);
                            interval = null;
                            /*   pause = layer.msg('<span style="font-size:24px">暂停</span>', {
                                   time: '-1',
                                   area: '200px'
                               });*/
                            $("#kaishi").find("span").text("暂停");
                            $("#kaishi").css({"display":"block"});
                            tag = false;
                        } else {
                            $(this).removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                            if (interval != null) {//判断计时器是否为空
                                clearTimeout(interval);
                                interval = null;
                            }
                            // layer.close(pause);
                            $("#kaishi").css({"display":"none"});
                            interval = setTimeout(startCount, 10);//启动计时器，调用overs函数，
                            tag = true;
                        }
                    }
                )
                //绑定重播单击事件
                $("#chongbo").click(function () {
                    runInHoleOption.series[0].data = [];
                    runInHoleOption.series[1].data = [];
                    runOnHoleOption.series[0].data = [];
                    runOnHoleOption.series[1].data = [];
                    depthOption.series[0].data = [];
                    speedOption.series[0].data = [];
                    flowOption.series[0].data = [];
                    electricityOption.series[0].data = [];
                    runInHole.setOption(runInHoleOption);
                    runOnHole.setOption(runOnHoleOption);
                    depth.setOption(depthOption);
                    speed.setOption(speedOption);
                    flow.setOption(flowOption);
                    electricity.setOption(electricityOption);
                    aolarr = [];
                    aolDownArr = [];
                    elearr = [];
                    eleDownArr = [];
                    i = 0;
                    j = 0;
                    clearTimeout(interval);
                    clearTimeout(r1);
                    clearTimeout(r2);
                    setTimeout(startCount, f1());
                    // layer.close(msg);
                    $("#bofang").removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                    $("#kaishi").css({"display":"none"});
                    tag = true;
                    // layer.close(pause);
                });

                //setimeout计时
                function f1() {
                    var s = $("#h1").val();
                    return s;
                }
            });
            //关闭窗口
            $("#tingzhi").click(function () {
                var wname = window.name;
                var index = parent.layer.getFrameIndex(wname);
                parent.layer.close(index);
            })
        });
      /*  layui.use(['layer', 'element'], function () {
            layer = layui.layer;
            element = layui.element;
            // var data = [];

            $.post("/data/getData.do", {}, function (obj) {
                //设置地图参数
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(114.384129, 30.508543),
                    offset: new AMap.Pixel(-10, -10),
                    icon: '/img/dd.png', // 添加 Icon 图标 URL
                    title: '测试'

                });
                marker.setLabel({
                    offset: new AMap.Pixel(20, 20),  //设置文本标注偏移量
                    content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
                    offset: new AMap.Pixel(-60, -30)//设置lable偏移量
                    // direction: 'top' //设置文本标注方位
                });
                map.add(marker);
                map.setCenter([114.384129, 30.508543]);//设置地图初始中心位置
                map.setZoom(10);//设置地图缩放级别
                var aolarr = [];
                var aolDownArr = [];
                var elearr = [];
                var eleDownArr = [];
                var up = obj.up;
                var down = obj.down;
                var i = 0;
                var j = 0;
                var r1;
                var r2;
                var msg;

                function startCount() {
                    if (i < up.length) {
                        var arr = [];
                        var arr2 = [];
                        var deptharr = [];
                        var speedarr = [];
                        var fluxarr = [];
                        var currentarr = [];
                        arr.push(up[i].au_aol);
                        arr2.push(up[i].electricity);
                        arr.push(up[i].drilling_depth);
                        arr2.push(up[i].drilling_depth);
                        deptharr.push(up[i].drilling_depth);
                        speedarr.push(up[i].drilling_speed);
                        fluxarr.push(up[i].cement_flux);
                        currentarr.push(up[i].electricity);
                        aolarr.push(arr);
                        elearr.push(arr2);
                        runInHoleOption.series[0].data = aolarr;
                        runInHoleOption.series[1].data = elearr;
                        depthOption.series[0].data = deptharr;
                        speedOption.series[0].data = speedarr;
                        flowOption.series[0].data = fluxarr;
                        electricityOption.series[0].data = currentarr;
                        runInHole.setOption(runInHoleOption);
                        depth.setOption(depthOption);
                        speed.setOption(speedOption);
                        flow.setOption(flowOption);
                        electricity.setOption(electricityOption);
                        i++;
                        var ff = f1();
                        r1 = setTimeout(startCount, f1());
                    } else {
                        if (j < down.length) {
                            var arr = [];
                            var arr2 = [];
                            var deptharr = [];
                            var speedarr = [];
                            var fluxarr = [];
                            var currentarr = [];
                            arr.push(down[j].au_aol);
                            arr2.push(down[j].electricity);
                            arr.push(down[j].drilling_depth);
                            arr2.push(down[j].drilling_depth);
                            deptharr.push(down[j].drilling_depth);
                            speedarr.push(down[j].drilling_speed);
                            fluxarr.push(down[j].cement_flux);
                            currentarr.push(down[j].electricity);
                            aolDownArr.push(arr);
                            eleDownArr.push(arr2);
                            console.log(aolDownArr);
                            console.log(eleDownArr);
                            runOnHoleOption.series[0].data = aolDownArr;
                            runOnHoleOption.series[1].data = eleDownArr;
                            depthOption.series[0].data = deptharr;
                            speedOption.series[0].data = speedarr;
                            flowOption.series[0].data = fluxarr;
                            electricityOption.series[0].data = currentarr;
                            runOnHole.setOption(runOnHoleOption);
                            depth.setOption(depthOption);
                            speed.setOption(speedOption);
                            flow.setOption(flowOption);
                            electricity.setOption(electricityOption);
                            j++;
                            r2 = setTimeout(startCount, f1());
                        } else {
                            msg = layer.msg('<span style="font-size:24px">播放结束</span>', {
                                time: '-1',
                                area: '300px'
                            });
                        }
                    }
                    //setTimeout是超时调用，使用递归模拟间歇调用
                }

                setTimeout(startCount, 1000);//启动定时器

                var interval = null;//计时器
                var pause;//layui消息框
                var tag = true;
                $("#bofang").click(function () {
                        if (tag) {
                            $(this).removeClass("layui-icon layui-icon-pause").addClass("layui-icon layui-icon-play");
                            clearTimeout(interval);
                            clearTimeout(r1);
                            clearTimeout(r2);
                            interval = null;
                           /!* pause = layer.msg('<span style="font-size:24px">暂停</span>', {
                                time: '-1',
                                area: '200px'
                            });*!/
                            $("#kaishi").find("span").text("暂停")
                            $("#kaishi").css({"display":"block"});
                            tag = false;
                        } else {
                            $(this).removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                            if (interval != null) {//判断计时器是否为空
                                clearTimeout(interval);
                                interval = null;
                            }
                            // layer.close(pause);
                            $("#kaishi").css({"display":"none"})
                            interval = setTimeout(startCount, 10);//启动计时器，调用overs函数，
                            tag = true;
                        }
                    }
                )
                //绑定重播单击事件
                $("#chongbo").click(function () {
                    runInHoleOption.series[0].data = [];
                    runInHoleOption.series[1].data = [];
                    runOnHoleOption.series[0].data = [];
                    runOnHoleOption.series[1].data = [];
                    depthOption.series[0].data = [];
                    speedOption.series[0].data = [];
                    flowOption.series[0].data = [];
                    electricityOption.series[0].data = [];
                    runInHole.setOption(runInHoleOption);
                    runOnHole.setOption(runOnHoleOption);
                    depth.setOption(depthOption);
                    speed.setOption(speedOption);
                    flow.setOption(flowOption);
                    electricity.setOption(electricityOption);
                    aolarr = [];
                    aolDownArr = [];
                    elearr = [];
                    eleDownArr = [];
                    i = 0;
                    j = 0;
                    clearTimeout(interval);
                    clearTimeout(r1);
                    clearTimeout(r2);
                    setTimeout(startCount, f1());
                    // layer.close(msg);
                    $("#bofang").removeClass("layui-icon layui-icon-play").addClass("layui-icon layui-icon-pause");
                    $("#kaishi").css({"display":"none"});

                    tag = true;
                    // layer.close(pause);
                });

                //setimeout计时
                function f1() {
                    var s = $("#h1").val();
                    return s;
                }
            });
            //关闭窗口
            $("#tingzhi").click(function () {
                var wname = window.name;
                var index = parent.layer.getFrameIndex(wname);
                parent.layer.close(index);
            })
        });*/
    }

</script>
</html>
